<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成工具</title>

    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="/js/element-ui/index.js"></script>

    <script src="/js/axios.min.js"></script>



</head>
<body>
<div id="app">
    <h1>自动代码生成工具</h1>
    <div>
        <el-input placeholder="数据库名" v-model="dataSource.url" style="width: 750px">
            <template slot="prepend">jdbc:mysql://localhost:3306/</template>
        </el-input>
    </div>
    <div style="margin-top: 15px;">
        <el-input placeholder="数据库用户名" v-model="dataSource.root" style="width: 250px"></el-input>
        <el-input type="password" placeholder="数据库密码" v-model="dataSource.password" style="width: 350px"></el-input>
        <el-button style="margin-left: 25px" type="primary" @click="getConnection" :disabled="connectBtnDisabled">连接数据库</el-button>
    </div>

    <div style="margin-top: 15px">
        <el-table
                :data="config.tableList"
                stripe
                border
                style="width: 100%">
            <el-table-column
                    prop="tableName"
                    label="表名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="实体类名称"
                    width="180">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.modelName"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="Mapper名称">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.mapperName"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    label="Service名称">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.serviceName"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    label="ServiceImpl名称">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.serviceImplName"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    label="Controller名称">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.controllerName"></el-input>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="margin-top: 15px">
<!--        <el-input v-model="config.storageName" placeholder="保存路径" style="width: 300px"></el-input>-->
        <el-input v-model="config.packageName" placeholder="包名称" style="width: 300px"></el-input>
        <el-button type="success" @click="createTemplate" :disabled="downloadBtnDisabled">下载模板</el-button>
<!--        <a href="./download"><el-button type="success">下载模板</el-button></a>-->
    </div>

</div>

<script>

    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                fileList: [],
                dataSource: {
                    root: '',
                    password: '',
                    url: '',
                },
                config: {
                    tableList: [],
                    packageName: '',
                    storageName: ''
                },
                connectBtnDisabled: false,
                downloadBtnDisabled: true
            };
        },
        methods: {
            getConnection() {
                this.connectBtnDisabled = true;
                var _this = this;
                var url = this.dataSource.url;
                this.dataSource.url = "jdbc:mysql://localhost:3306/" + this.dataSource.url + "?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8";
                axios.post("/con", this.dataSource).then(function (response) {
                    if(response.data.code === 20000) {
                        _this.downloadBtnDisabled = false;
                        _this.config.tableList = response.data.extend.tableList;
                        alert("数据库连接成功");
                        // _this.createTemplate();
                    } else {
                        alert("数据库连接失败");
                    }
                })
                this.dataSource.url = url;
                this.connectBtnDisabled = false;
            },

            createTemplate() {

                // alert(this.config);
                axios.post("/createTemplate", this.config).then(function (response) {
                    // alert(response.data.extend.basePath);
                    // if(response.data.message === 20000) {
                    //     alert("下载成功");
                    // } else {
                    //     alert("下载失败");
                    // }
                    // var zipName = "模板.zip"; // 下载的文件名
                    // alert(response.data);
                    // let blob = new Blob([response.data], { type: "application/zip" }); // 下载格式为zip
                    let elink = document.createElement("a"); // 创建一个<a>标签
                    elink.style.display = "none"; // 隐藏标签
                    elink.href = "./download?basePath=" + response.data.extend.basePath; // 配置href
                    elink.click();
                    document.body.removeChild(elink); // 移除<a>标签
                })
            }
        }
    })

    document.querySelector('#b').addEventListener('change', e => {
        for (let entry of e.target.files)
            console.log(entry.name, entry.webkitRelativePath);
    });

</script>

</body>
</html>